```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微服务架构中的跨域解决方案</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-block {
            background-color: #2d3748;
            border-radius: 8px;
            overflow: hidden;
        }
        .code-header {
            background-color: #1a202c;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
        }
        .code-dots {
            display: flex;
            gap: 6px;
        }
        .code-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .code-red {
            background-color: #f56565;
        }
        .code-yellow {
            background-color: #f6e05e;
        }
        .code-green {
            background-color: #48bb78;
        }
        .solution-card {
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }
        .solution-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            border-left-color: #667eea;
        }
        .mermaid-chart {
            background-color: #f8fafc;
            border-radius: 12px;
            padding: 2rem;
            margin: 2rem 0;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">微服务架构中的跨域解决方案</h1>
                    <p class="text-xl mb-8 opacity-90">探索现代分布式系统中的跨域挑战与创新解决方案</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
                            <i class="fas fa-lock-open text-2xl"></i>
                        </div>
                        <p class="text-sm opacity-80">跨域安全 · 微服务通信 · 最佳实践</p>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative">
                        <div class="absolute -top-6 -left-6 w-24 h-24 bg-purple-300 rounded-full opacity-20"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-300 rounded-full opacity-20"></div>
                        <div class="relative bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl p-6 border border-white border-opacity-20 shadow-xl">
                            <div class="text-center mb-4">
                                <i class="fas fa-route text-5xl text-white opacity-90"></i>
                            </div>
                            <h3 class="text-xl font-semibold mb-2">跨域通信路径</h3>
                            <p class="text-sm opacity-80">在分布式系统中构建安全高效的跨域通信通道</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 py-16">
        <!-- Introduction -->
        <section class="mb-16">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-8">
                    <div class="flex items-center mb-6">
                        <div class="w-2 h-8 bg-blue-600 mr-3"></div>
                        <h2 class="text-2xl font-bold">跨域问题的本质</h2>
                    </div>
                    <p class="text-gray-700 mb-6 leading-relaxed">
                        在微服务架构中，跨域问题依然是一个重要的考虑点。不同的微服务可能部署在不同的域名或端口下，这就可能涉及到跨域问题。解决跨域问题的方法与单体应用中类似，但在微服务架构中，通常需要考虑更加复杂的场景。
                    </p>
                    <div class="mermaid-chart">
                        <div class="mermaid">
                            graph TD
                                A[客户端] -->|跨域请求| B[微服务A]
                                A -->|跨域请求| C[微服务B]
                                A -->|跨域请求| D[微服务C]
                                B --> E[数据库A]
                                C --> F[数据库B]
                                D --> G[数据库C]
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Solutions Section -->
        <section class="mb-16">
            <div class="flex items-center mb-10">
                <div class="w-2 h-8 bg-purple-600 mr-3"></div>
                <h2 class="text-2xl font-bold">五大跨域解决方案</h2>
            </div>

            <!-- Solution 1 -->
            <div class="solution-card bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-8">
                    <div class="flex items-start mb-6">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-exchange-alt text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">1. 使用 CORS（跨源资源共享）</h3>
                            <p class="text-gray-600">CORS 是解决跨域问题的主要方法。它通过设置 HTTP 头部来允许特定的域访问资源。</p>
                        </div>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-700 flex items-center">
                                <i class="fas fa-leaf text-green-500 mr-2"></i> Spring Boot 示例
                            </h4>
                            <div class="code-block">
                                <div class="code-header">
                                    <div class="code-dots mr-3">
                                        <div class="code-dot code-red"></div>
                                        <div class="code-dot code-yellow"></div>
                                        <div class="code-dot code-green"></div>
                                    </div>
                                    <span class="text-gray-400 text-sm">WebConfig.java</span>
                                </div>
                                <pre class="p-4 text-gray-200 overflow-x-auto"><code>@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://frontend.example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}</code></pre>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-700 flex items-center">
                                <i class="fab fa-node-js text-green-500 mr-2"></i> Express.js 示例
                            </h4>
                            <div class="code-block">
                                <div class="code-header">
                                    <div class="code-dots mr-3">
                                        <div class="code-dot code-red"></div>
                                        <div class="code-dot code-yellow"></div>
                                        <div class="code-dot code-green"></div>
                                    </div>
                                    <span class="text-gray-400 text-sm">server.js</span>
                                </div>
                                <pre class="p-4 text-gray-200 overflow-x-auto"><code>const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: 'http://frontend.example.com',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: '*',
    credentials: true
}));</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Solution 2 -->
            <div class="solution-card bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-8">
                    <div class="flex items-start mb-6">
                        <div class="bg-purple-100 p-3 rounded-full mr-4">
                            <i class="fas fa-door-open text-purple-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">2. 使用 API 网关</h3>
                            <p class="text-gray-600">API 网关作为微服务架构的核心组件之一，可以集中管理跨域请求。通过在网关中配置 CORS，可以简化跨域问题的处理。</p>
                        </div>
                    </div>
                    
                    <div class="code-block">
                        <div class="code-header">
                            <div class="code-dots mr-3">
                                <div class="code-dot code-red"></div>
                                <div class="code-dot code-yellow"></div>
                                <div class="code-dot code-green"></div>
                            </div>
                            <span class="text-gray-400 text-sm">application.yml</span>
                        </div>
                        <pre class="p-4 text-gray-200 overflow-x-auto"><code>spring:
  cloud:
    gateway:
      routes:
        - id: service_route
          uri: http://service.example.com
          predicates:
            - Path=/api/**
          filters:
            - name: CORS
              args:
                allowedOrigins: "http://frontend.example.com"
                allowedMethods: "GET, POST, PUT, DELETE"
                allowedHeaders: "*"
                allowCredentials: true</code></pre>
                    </div>
                </div>
            </div>

            <!-- Solution 3 -->
            <div class="solution-card bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-8">
                    <div class="flex items-start mb-6">
                        <div class="bg-green-100 p-3 rounded-full mr-4">
                            <i class="fas fa-random text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">3. 使用反向代理</h3>
                            <p class="text-gray-600">反向代理可以将请求从一个域代理到另一个域，这样就可以在同一个域名下处理请求，从而避免跨域问题。Nginx 是常用的反向代理服务器。</p>
                        </div>
                    </div>
                    
                    <div class="code-block">
                        <div class="code-header">
                            <div class="code-dots mr-3">
                                <div class="code-dot code-red"></div>
                                <div class="code-dot code-yellow"></div>
                                <div class="code-dot code-green"></div>
                            </div>
                            <span class="text-gray-400 text-sm">nginx.conf</span>
                        </div>
                        <pre class="p-4 text-gray-200 overflow-x-auto"><code>server {
    listen 80;
    server_name api.example.com;

    location / {
        proxy_pass http://service.example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Solution 4 -->
            <div class="solution-card bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-8">
                    <div class="flex items-start mb-6">
                        <div class="bg-yellow-100 p-3 rounded-full mr-4">
                            <i class="fas fa-code text-yellow-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">4. JSONP（JSON with Padding）</h3>
                            <p class="text-gray-600">JSONP 可以用来解决跨域问题，但它仅支持 GET 请求。它的使用在现代应用中逐渐减少，因为 CORS 是更为安全和灵活的解决方案。</p>
                        </div>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-700">客户端实现</h4>
                            <div class="code-block">
                                <div class="code-header">
                                    <div class="code-dots mr-3">
                                        <div class="code-dot code-red"></div>
                                        <div class="code-dot code-yellow"></div>
                                        <div class="code-dot code-green"></div>
                                    </div>
                                    <span class="text-gray-400 text-sm">client.js</span>
                                </div>
                                <pre class="p-4 text-gray-200 overflow-x-auto"><code>function handleResponse(data) {
    console.log(data);
}

const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);</code></pre>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-700">服务端实现</h4>
                            <div class="code-block">
                                <div class="code-header">
                                    <div class="code-dots mr-3">
                                        <div class="code-dot code-red"></div>
                                        <div class="code-dot code-yellow"></div>
                                        <div class="code-dot code-green"></div>
                                    </div>
                                    <span class="text-gray-400 text-sm">DataController.java</span>
                                </div>
                                <pre class="p-4 text-gray-200 overflow-x-auto"><code>@RequestMapping("/data")
public void getData(HttpServletResponse response, 
                   @RequestParam String callback) throws IOException {
    String jsonResponse = "{ \"key\": \"value\" }";
    response.setContentType("application/javascript");
    response.getWriter().write(callback + "(" + jsonResponse + ");");
}</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Solution 5 -->
            <div class="solution-card bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-8">
                    <div class="flex items-start mb-6">
                        <div class="bg-red-100 p-3 rounded-full mr-4">
                            <i class="fas fa-plug text-red-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">5. WebSocket</h3>
                            <p class="text-gray-600">WebSocket 允许在客户端和服务器之间建立持久的全双工通信通道，可以用来解决跨域问题。客户端和服务器之间的通信不受同源策略限制。</p>
                        </div>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-700">客户端实现</h4>
                            <div class="code-block">
                                <div class="code-header">
                                    <div class="code-dots mr-3">
                                        <div class="code-dot code-red"></div>
                                        <div class="code-dot code-yellow"></div>
                                        <div class="code-dot code-green"></div>
                                    </div>
                                    <span class="text-gray-400 text-sm">client.js</span>
                                </div>
                                <pre class="p-4 text-gray-200 overflow-x-auto"><code>const socket = new WebSocket('ws://api.example.com/socket');

socket.onmessage = function(event) {
    console.log('从服务器收到消息: ', event.data);
};

socket.send('Hello Server!');</code></pre>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-3 text-gray-700">服务端实现 (Node.js)</h4>
                            <div class="code-block">
                                <div class="code-header">
                                    <div class="code-dots mr-3">
                                        <div class="code-dot code-red"></div>
                                        <div class="code-dot code-yellow"></div>
                                        <div class="code-dot code-green"></div>
                                    </div>
                                    <span class="text-gray-400 text-sm">server.js</span>
                                </div>
                                <pre class="p-4 text-gray-200 overflow-x-auto"><code>const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('收到: %s', message);
    });

    ws.send('Hello Client!');
});</code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Comparison Section -->
        <section class="mb-16">
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="p-8">
                    <div class="flex items-center mb-6">
                        <div class="w-2 h-8 bg-indigo-600 mr-3"></div>
                        <h2 class="text-2xl font-bold">解决方案对比</h2>
                    </div>
                    
                    <div class="mermaid-chart">
                        <div class="mermaid">
                            gantt
                                title 跨域解决方案适用场景
                                dateFormat  X
                                axisFormat %s
                                
                                section 通信方式
                                CORS :a1, 0, 30
                                API网关 :a2, 30, 60
                                反向代理 :a3, 60, 90
                                JSONP :a4, 90, 120
                                WebSocket :a5, 120, 150
                                
                                section 适用场景
                                REST API :a1, 0, 30
                                微服务架构 :a2, 30, 60
                                同域名访问 :a3, 60, 90
                                老式浏览器 :a4, 90, 120
                                实时通信 :a5, 120, 150
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">方案</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">优点</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">缺点</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">适用场景</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-blue-600">CORS</td>
                                    <td class="px-6 py-4">标准化，安全，支持所有HTTP方法</td>
                                    <td class="px-6 py-4">需要服务端配置，复杂请求会有预检</td>
                                    <td class="px-6 py-4">现代Web应用，REST API</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-purple-600">API网关</td>
                                    <td class="px-6 py-4">集中管理，简化微服务配置</td>
                                    <td class="px-6 py-4">引入单点故障，增加系统复杂性</td>
                                    <td class="px-6 py-4">微服务架构，多服务管理</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-green-600">反向代理</td>
                                    <td class="px-6 py-4">隐藏真实服务地址，负载均衡</td>
                                    <td class="px-6 py-4">需要额外服务器资源</td>
                                    <td class="px-6 py-4">需要统一入口，安全增强</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-yellow-600">JSONP</td>
                                    <td class="px-6 py-4">兼容老浏览器，简单实现</td>
                                    <td class="px-6 py-4">仅支持GET，安全性低</td>
                                    <td class="px-6 py-4">老旧系统，简单数据获取</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-red-600">WebSocket</td>
                                    <td class="px-6 py-4">全双工通信，实时性好</td>
                                    <td class="px-6 py-4">协议复杂，服务器开销大</td>
                                    <td class="px-6 py-4">实时应用，聊天，推送</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <!-- Conclusion -->
        <section class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 mb-16">
            <div class="flex items-start">
                <div class="bg-white bg-opacity-30 rounded-full p-3 mr-4">
                    <i class="fas fa-lightbulb text-yellow-500 text-xl"></i>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">最佳实践建议</h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-700">
                        <li>现代应用优先使用 <strong class="text-blue-600">CORS</strong> 方案，既安全又灵活</li>
                        <li>微服务架构中考虑使用 <strong class="text-purple-600">API网关</strong> 统一管理跨域配置</li>
                        <li>对于实时应用，<strong class="text-red-600">WebSocket</strong> 是最佳选择</li>
                        <li>避免在新项目中使用 <strong class="text-yellow-600">JSONP</strong>，除非需要兼容老旧浏览器</li>
                        <li>结合 <strong class="text-green-600">反向代理</strong> 可以提高安全性和性能</li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-10">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-lg font-semibold text-white">技术小馆</h3>
                    <p class="text-sm opacity-75">专注于前沿技术分享与实战经验</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition duration-300 flex items-center">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        <span>访问技术小馆语雀</span>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm opacity-75">
                © 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            gantt: {
                barHeight: 20,
                fontSize: 12
            }
        });
        
        // 添加微交互效果
        document.querySelectorAll('.solution-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                const icon = this.querySelector('i');
                icon.classList.add('animate-pulse');
            });
            
            card.addEventListener('mouseleave', function() {
                const icon = this.querySelector('i');
                icon.classList.remove('animate-pulse');
            });
        });
    </script>
</body>
</html>
```